<!DOCTYPE html>
<html>
<head>
    <title>表单验证示例</title>
    <script>
        function validateForm() {
            // 获取表单输入值
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var telephone = document.getElementById("telephone").value;
            var regarding = document.getElementById("regarding").value;
            var message = document.getElementById("message").value;

            // 检查姓名长度
            if (name.length < 5) {
                alert("姓名必须超过5个字符");
                document.getElementById("name").value = ""; // 清空输入框
                return false;
            }

            // 检查电子邮件格式
            if (!email.includes("@") || email.split("@")[1].length < 3) {
                alert("电子邮件格式不正确");
                document.getElementById("email").value = ""; // 清空输入框
                return false;
            }

            // 检查电话号码格式
            var telephoneRegex = /^\d{5}-\d{3}-\d{3}$/;
            if (!telephone.match(telephoneRegex)) {
                alert("电话号码格式不正确");
                document.getElementById("telephone").value = ""; // 清空输入框
                return false;
            }

            // 检查必填字段是否为空
            var requiredInputs = document.querySelectorAll("input[required]");
            for (var i = 0; i < requiredInputs.length; i++) {
                if (requiredInputs[i].value.trim() === "") {
                    alert("必填字段不能为空");
                    requiredInputs[i].value = ""; // 清空输入框
                    return false;
                }
            }

            // 表单验证通过，可以提交表单
            return true;
        }
        function autoTab(current, nextFieldID) {
            if (current.value.length >= current.maxLength) {
                document.getElementById(nextFieldID).focus(); 
            }
        }
    </script>
</head>
<body>
    <div style="width: 500px; height: 500px; margin: 0 auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);">
        <form onsubmit="return validateForm()" style="text-align: center; display: flex; flex-direction: column; height: 100%;">
            <div style="flex: 1;">
                <label style="font-style: italic; color: gray; font-weight: bold;">Provide your information&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<hr style="width: 400px;"></label>
            </div>
            <div style="flex: 1;">
                <label for="name" style="color: gray;">Name<label style="color: red;">*</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="text" id="name" required style="height: 30px;">
            </div>
            <div style="flex: 1;">
                <label for="email" style="color: gray;">Email<label style="color: red;">*</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="email" id="email" required style="height: 30px;">
            </div>
            <div style="flex: 1;">
                <label for="telephone1" style="color: gray;">Telephone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="tel" id="telephone1" pattern="\d{5}" required maxlength="5" oninput="autoTab(this, 'telephone2')" style="width: 40px;"><label for="">-</label>
                <input type="tel" id="telephone2" pattern="\d{3}" required maxlength="3" oninput="autoTab(this, 'telephone3')" style="width: 40px;"><label for="">-</label>
                <input type="tel" id="telephone3" pattern="\d{3}" required maxlength="3" style="width: 40px;">
            </div>
            <div style="flex: 1;">
                <label for="regarding" style="color: gray;">Regarding&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <select id="regarding" required style="height: 30px; width: 200px;">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                </select>
            </div>
            <div style="flex: 1;">
                <label for="message" style="color: gray;">Message<label style="color: red;">*</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="message" id="message" required style="height: 80px;">
            </div>
            <div style="flex: 1;">
                <input type="submit" value="submit" style="background-color: orange; color: white; width: 80px; height: 30px; border: none; border-radius: 5px;">
            </div>
        </form>
    </div>
</body>
</html>